<!DOCTYPE html><head>
	<meta charset="utf-8">
	<title>Magazine List Page with border - Fashionic Ajax Respondsive HTML Template</title>
	
	<!-- CSS
	  ================================================== -->
	<link rel="stylesheet" media="all" type="text/css" href="styles/mediaelementplayer.min.css" />
	<link rel="stylesheet" media="all" type="text/css" href="styles/supersized.css" />
	<link rel="stylesheet" media="all" type="text/css" href="js/themes/classic/galleria.classic.css" />
	<link rel="stylesheet" media="all" type="text/css" href="style.css" />
	<link rel="stylesheet" media="all" type="text/css" href="styles/light.css" /><!--Color scheme include: light.css and dark.css-->
	<link rel="stylesheet" media="all" type="text/css" href="styles/respondsive.css" />
	<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="styles/retina.css" />

	 <!--Mobile Specific Metas
	  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<!-- JS
 	================================================== -->
	<script type='text/javascript' src='js/jquery.js'></script>
	<script type='text/javascript' src='js/jquery.easing.min.js'></script>
	<script type='text/javascript' src='js/jquery.infinitescroll.min.js'></script>
	<script type='text/javascript' src='js/mediaelement-and-player.min.js'></script>
	<script type='text/javascript' src='js/jquery.hoverIntent.js'></script>
	<script type='text/javascript' src='js/supersized.3.2.7.min.js'></script>
	<script type='text/javascript' src='js/supersized.shutter.min.js'></script>
	<script type='text/javascript' src='js/galleria-1.2.8.min.js'></script>
	<script type='text/javascript' src='js/themes/classic/galleria.classic.js'></script>
	<script type='text/javascript' src='js/jquery.hoverdir.js'></script>
	<script type='text/javascript' src='js/color.js'></script>
	<script type='text/javascript' src='js/jquery.isotope.js'></script>
	<script type='text/javascript' src='js/main.js'></script>
	<script type='text/javascript' src='js/infiscroll.trigger.js'></script><!--Js codes for Infinits Scroll-->
	<script>
	var blockWidth = '300'; // Width of block
	var blockMargin = '10';  // Space between blocks
	var blockColumn = '2';  // Columns of expanded block 
	var smallBlockBg = '#ffffff'; // Background color of block
	var bigBlockBg = '#f3f3f3'; // Background color of expanded block
	</script>
	
	
	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="img/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-114x114.png">
	
	<!-- IE hack
	================================================== -->
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!--[if lte IE 8 ]>
	<script type="text/javascript" src="js/ie.js"></script>
	<link rel="stylesheet" media="all" type="text/css" href="styles/ie.css" />
	<![endif]-->
	
	<!--[if lte IE 6]>
	<div style="width: 100%;" class="messagebox_orange">Your browser is obsolete and does not support this webpage. Please use newer version of your browser or visit <a href="http://www.ie6countdown.com/" target="_new">Internet Explorer 6 countdown page</a>  for more information. </div>
	<![endif]-->	
	
	<!--/////////////
	//Google Fonts//
	///////////////-->
	<link href='../../../fonts.googleapis.com/css_362961CB' rel='stylesheet' type='text/css'>
	<link href='../../../fonts.googleapis.com/css_D6542681' rel='stylesheet' type='text/css'>
	<link href='../../../fonts.googleapis.com/css_96849461' rel='stylesheet' type='text/css'>
	
</head>

<body class="page">
<div id="wrap">

<!--/////////////////////////////////////////////
//////////                         /////////////
//////////    Left Sidebar Area   //////////////
/////////                         /////////////
////////////////////////////////////////////-->	
	<div id="siderbar" class="sidebar_forlist">
	<div class="sidebar_wrapmost">
	
	<!--
	////////////////
	     Logo
	///////////////
	-->	
		<p id="logo"><a href="index.html" title="Fashionic Template"><img src="img/logo.png" alt="Fashionic Template" width="250" height="90"></a></p>
		<p id="logo_retina"><a href="index.html" title="Fashionic Template"><img src="img/logo_retina.png" alt="Fashionic Template" width="250" height="90"></a></p><!--Logo For High Resolution -->
				
			
	<!--
	//////
	 Menu
	//////
	-->	
		<div class="menu_wrap">
			<div id="navi" class="clearfix">
			<ul class="menu">
				<li class="menu-item"><a href="index.html">HOME</a></li>
				<li class="menu-item">
					<a href="index.html">PORTFOLIO</a>
					<!--Submenu for Portfolio item-->
					<ul class="sub-menu">
						<li class="menu-item"><a href="portfolio_list_23.html">Portfolio 2:3</a></li>
						<li class="menu-item"><a href="portfolio_list_32.html">Portfolio 3:2</a></li>
						<li class="menu-item"><a href="portfolio_list_11.html">Portfolio 1:1</a></li>
						<li class="menu-item"><a href="portfolio_list_tumblr.html">Tumblr Style</a></li>
					</ul>
					<!--End Submenu for Portfolio item-->
				</li>
				<li class="menu-item current-menu-parent">
					<a href="magazine.html">MAGAZINE</a>
					<ul class="sub-menu">
						<li class="menu-item"><a href="magazine_with_slider.html">Magazine with Slider</a></li>
						<li class="menu-item current-menu-item"><a href="magazine_with_border.html">List with Border</a></li>
					</ul>
				</li>
				<li class="menu-item">
					<a href="javascript:;">FEATURES</a>
					<!--Submenu for Features item-->
					<ul class="sub-menu">
						
						<li class="menu-item"><a href="feature_list_style.html">List Page Style</a></li>
						<li class="menu-item"><a href="feature_slider.html">Slider</a></li>
						<li class="menu-item"><a href="feature_pagination.html">Pagination</a></li>
					</ul>
					<!--End Submenu for Features item-->
				</li>
				<li class="menu-item"><a href="javascript:;">PAGE EXAMPLES</a>
					<ul class="sub-menu">
						<li class="menu-item"><a href="about.html">About</a></li>
						<li class="menu-item"><a href="contact.html">Contact</a></li>
					</ul>
				</li>
			</ul>
			</div><!--End navi-->
	
	<!--
	//////////////
	filter button
	/////////////
	-->						
			<ul id="filterable">
				<li class="current"><a data-filter="*" href="#">All</a></li>	
				<li><a href="#" data-filter=".literary-works">LITERARY WORKS</a></li>       
				<li><a href="#" data-filter=".news">NEWS</a></li>       
			</ul>
		</div><!--End menu_wrap-->
	</div><!--End sidebar_wrapmost-->
	
	<div id="siderbar_bottom">
	
	<!--
	//////////////
	Search box
	/////////////
	-->	
		<div id="search" class="searchcss social_active">
			<form id="search_form" name="" method="get" class="search-form_header" action="#">
			<span class="searchicon"></span><input type="text" onBlur="if (this.value == '') {this.value = 'Search';}" onFocus="if (this.value == 'Search') {this.value = '';}" id="s" name="s" value="Search" class="textboxsearch"><input type="submit" value="" class="submitsearch" name="submitsearch">
</form>
		</div><!--END search-->
		
	<!--
	///////////
	Social icons 
	(it is not displayed in mobile device)
	///////////
	-->	
		
		<div id="social_icon">
			<a id="social_facebook" class="social_active" href="../../../www.facebook.com/uiueux/index.htm" title="Visit Facebook page"><span></span></a><!--Facebook-->
			<a id="social_twitter" class="social_active" href="../../../www.twitter.com/uiueux/index.htm" title="Visit Twitter page"><span></span></a><!--Twitter-->
			<a id="social_google_plus" class="social_active" href="#" title="Visit Google Plus page"><span></span></a><!--Google plus-->
			<a id="social_pinterest" class="social_active" href="#" title="Visit Pinterest page"><span></span></a><!--Pinterest-->
			<a id="social_dribbble" class="social_active" href="#" title="Visit Dribbble page"><span></span></a><!--Dribbble-->	
			<!--<a id="social_trumblr" class="social_active" href="#" title="Visit Tumblr page"><span></span></a> Trumblr-->
			<!--<a id="social_youtube" class="social_active" href="#" title="Visit Youtube page"><span></span></a> Youtube-->
			<!--<a id="social_flickr" class="social_active" href="#" title="Visit Flickr page"><span></span></a> Flickr-->
			<!--<a id="social_vimeo" class="social_active" href="#" title="Visit Vimeo page"><span></span></a> Vimeo-->
			<!--<a id="social_linkedin" class="social_active" href="#" title="Visit LinkedIn page"><span></span></a> Linkedin-->
			<!--<a id="social_forst" class="social_active" href="#" title="Visit Forst page"><span></span></a> Forst-->
			<!--<a id="social_github" class="social_active" href="#" title="Visit Github page"><span></span></a> Github-->
			<!--<a id="social_rss" class="social_active" href="#" title="Rss"><span></span></a> Rss-->			
		</div><!--END social_icon-->
		
	
	<!--
	///////////
	copyright 
	(it is not displayed in mobile device)
	///////////
	-->			
		<div id="copyright">Copyright @ uiueux.com</div>
	</div><!--END siderbar_bottom-->	
	</div><!--End sidebar-->



	<!---/////////////////////////////////////////////
	//////////                         /////////////
	//////////    Main Content Area   //////////////
	/////////                         /////////////
	////////////////////////////////////////////-->	
	<div id="content">
	<!--
	////////////////
	  Blocks list
	///////////////
	-->	
		<ul id="item-wrap" class="clearfix " >
				
			<li class="item audiowrap magazine music">
				<div class="audio_wrap">
					<h2 class="audio_title">Audio Post &#8211; urpis magna habitasse magna, ac purus</h2>
					<audio width="100%" id="player924" src="http://1.s3.envato.com/files/32610158/preview.mp3" type="audio/mp3"  controls="controls" preload="none"></audio>
				</div><!--End audio_wrap-->
			</li><!--Audio block-->
			
			<li class="item item_standard haslink article magazine" rel="content-blog-1.html">
				<a class="post_title withimg" href="javascript:;" act="zoom" title="Standard Post &#8211; Egestas rhoncus massa"><img class="standitem_img" src="../../wp/fashionic/files/2012/09/7289635256_f41c707db6_h-340x143.jpg" /></a>
				<div class="layout-stand layout-con-style">
					<h2><a act="zoom" class="post_title" href="javascript:;" title="Standard Post &#8211; Egestas rhoncus massa">Standard Post &#8211; Egestas rhoncus massa</a></h2>
					<p>Natoque turpis pulvinar! Nascetur. Facilisis, et facilisis, vel elementum porta pulvinar auctor est et, sociis ac pid enim magna duis habitasse aenean aliquam eros eros nascetur, facilisis ultrices nunc, mauris magnis egestas enim sed, pulvinar, cras aliquet lacus tortor.</p>
					<a act="zoom" href="javascript:;" title="Standard Post &#8211; Egestas rhoncus massa" class="readmore">Readmore</a>									
				</div><!--End layout-stand-->
			</li><!-- blog block with thumbnail -->
			
			<li class="item magazine video video_wrap" rel="http://www.uiueux.com/wp/fashionic/2012/08/25/youtube-demo/" postid="22">
				<div class="layout-video">			
					<div class="videoWrapper"><iframe src="../../../www.youtube.com/embed/GrfXtAHYoVA_609C11C5"></iframe></div>
				</div>
			</li><!--video block / Embed youtube-->
					
			<li class="item item_standard haslink article magazine" rel="content-blog-2.html">
				<a class="post_title withimg" href="javascript:;" act="zoom" title="Standard Post &#8211; Adipiscing dictumst vel"><img class="standitem_img" src="../../wp/fashionic/files/2012/09/6249897616_bcaa7023c9_b-340x476.jpg" /></a>
				<div class="layout-stand layout-con-style">
					<h2><a act="zoom" class="post_title" href="javascript:;" title="Standard Post &#8211; Adipiscing dictumst vel">Standard Post &#8211; Adipiscing dictumst vel</a></h2>
					<p>Velit turpis augue in egestas odio adipiscing. Risus non, cursus porta sociis diam amet integer mattis tortor ut sit eros parturient! Aliquam cras, vel vel in vel, sit tristique cum magna amet diam? Massa cursus nisi scelerisque. Odio adipiscing.</p>
					<a act="zoom" href="javascript:;" title="Standard Post &#8211; Adipiscing dictumst vel" class="readmore">Readmore</a>
				</div>	
			</li><!-- blog block with thumbnail -->
					
			<li class="item item_standard haslink article magazine" rel="content-blog-1.html">
				<a class="post_title withimg" href="javascript:;" act="zoom" title="Standard Post &#8211; Facilisis, et facilisis"><img class="standitem_img" src="../../wp/fashionic/files/2012/09/1600-Dirk-Dallas-340x255.jpg" /></a>
				<div class="layout-stand layout-con-style">
				<h2><a act="zoom" class="post_title" href="javascript:;" title="Standard Post &#8211; Facilisis, et facilisis">Standard Post &#8211; Facilisis, et facilisis</a></h2>
				<p>Mauris? Nascetur sociis montes mus massa aenean, cursus massa? Ridiculus enim augue arcu! Natoque! Eu. Sociis nec a porta pellentesque velit hac tempor urna dolor. Cras, magna habitasse magnis aliquet aliquet aenean montes nec turpis, odio pulvinar elit enim.</p>
				<a act="zoom" href="javascript:;" title="Standard Post &#8211; Facilisis, et facilisis" class="readmore">Readmore</a>
				</div>	
			</li><!-- blog block with thumbnail -->
							
			<li class="item magazine video video_wrap">
				<div class="layout-video">			
					<div class="videoWrapper"><iframe title="Vimeo video player" src="../../../player.vimeo.com/video/40356427_27F43B5B" width="100%" height="auto" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
									
				</div>
			</li><!-- video block / Embed Vimeo-->
				
			
			<li class="item item_standard haslink article magazine" rel="content-blog-2.html">
				<a class="post_title withimg" href="javascript:;" act="zoom" title="Standard Post &#8211; Facilisis, et facilisis"><img class="standitem_img" src="../../wp/fashionic/files/2012/09/1600-Dirk-Dallas-340x255.jpg" /></a>
				<div class="layout-stand layout-con-style">
					<h2><a act="zoom" class="post_title" href="javascript:;" title="Standard Post &#8211; Facilisis, et facilisis">Standard Post &#8211; Facilisis, et facilisis</a></h2>
					<p>Mauris? Nascetur sociis montes mus massa aenean, cursus massa? Ridiculus enim augue arcu! Natoque! Eu. Sociis nec a porta pellentesque velit hac tempor urna dolor. Cras, magna habitasse magnis aliquet aliquet aenean montes nec turpis, odio pulvinar elit enim.</p>
					<a act="zoom" href="javascript:;" title="Standard Post &#8211; Facilisis, et facilisis" class="readmore">Readmore</a>
				</div>
			</li><!--blog block with thumbnail-->
		</ul>
	</div><!--END content -->
	
		<!--//////////////////////////////////
		//// Social icons for mobile devices //
		//////////////////////////////-/////-->
		
		<div id="social_icon" class="social_icon_mobile">
			<a id="social_facebook" class="social_active" href="../../../www.facebook.com/uiueux/index.htm" title="Visit Facebook page"><span></span></a><!--Facebook-->
			<a id="social_twitter" class="social_active" href="../../../www.twitter.com/uiueux/index.htm" title="Visit Twitter page"><span></span></a><!--Twitter-->
			<a id="social_google_plus" class="social_active" href="#" title="Visit Google Plus page"><span></span></a><!--Google plus-->
			<a id="social_pinterest" class="social_active" href="#" title="Visit Pinterest page"><span></span></a><!--Pinterest-->
			<a id="social_dribbble" class="social_active" href="#" title="Visit Dribbble page"><span></span></a><!--Dribbble-->	
			<!--<a id="social_trumblr" class="social_active" href="#" title="Visit Tumblr page"><span></span></a> Trumblr-->
			<!--<a id="social_youtube" class="social_active" href="#" title="Visit Youtube page"><span></span></a> Youtube-->
			<!--<a id="social_flickr" class="social_active" href="#" title="Visit Flickr page"><span></span></a> Flickr-->
			<!--<a id="social_vimeo" class="social_active" href="#" title="Visit Vimeo page"><span></span></a> Vimeo-->
			<!--<a id="social_linkedin" class="social_active" href="#" title="Visit LinkedIn page"><span></span></a> Linkedin-->
			<!--<a id="social_forst" class="social_active" href="#" title="Visit Forst page"><span></span></a> Forst-->
			<!--<a id="social_github" class="social_active" href="#" title="Visit Github page"><span></span></a> Github-->
			<!--<a id="social_rss" class="social_active" href="#" title="Rss"><span></span></a> Rss-->	
		</div><!--END social-->
		
		<!--//////////////////////////////////////
		//// Copyright info. for mobile devices //
		//////////////////////////////-/////-->
		<div id="copyright_mobile" style="">Copyright @ uiueux.com</div>
</div>
<!--Back Top button-->
<div id="top"></div>
</body>
</html>